<template>
    <div>
        <div class="formContainer">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm jform">
                <el-form-item label="读者姓名" prop="name" label-width="120px">
                    <el-input v-model="ruleForm.name" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="读者所在单位" prop="workplace" label-width="120px">
                    <el-select v-model="ruleForm.workplace" placeholder="请选择">
                        <el-option label="计算机科学学院" value="计算机科学学院"></el-option>
                        <el-option label="医学院" value="医学院"></el-option>
                        <el-option label="城建学院" value="城建学院"></el-option>
                        <el-option label="文学院" value="文学院"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="读者类别" prop="type" label-width="120px">
                    <el-select v-model="ruleForm.type" placeholder="请选择">
                        <el-option label="教师" value="教师"></el-option>
                        <el-option label="本科生" value="本科生"></el-option>
                        <el-option label="专科生" value="专科生"></el-option>
                        <el-option label="硕士研究生" value="硕士研究生"></el-option>
                        <el-option label="博士研究生" value="博士研究生"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即查询</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>


        </div>
        <el-divider></el-divider>
        <div class="tableContainer">
            <el-table
                    :data="queryResult"
                    border
                    style="width: 100%">
                <el-table-column prop="rdId" label="编号" width="40px"></el-table-column>
                <el-table-column prop="rdName" label="姓名"></el-table-column>
                <el-table-column prop="rdSex" label="性别" width="40px"></el-table-column>
                <el-table-column prop="rdTypeName" label="类别"></el-table-column>
                <el-table-column prop="rdDept" label="单位" width="120px"></el-table-column>
                <el-table-column prop="rdPhone" label="电话" width="120px"></el-table-column>
                <el-table-column prop="rdEmail" label="邮箱" width="160px"></el-table-column>
                <el-table-column prop="rdDateReg" label="办卡日期" width="160px"></el-table-column>
                <el-table-column prop="rdStatus" label="状态"></el-table-column>
                <el-table-column prop="rdBorrowQty" label="借阅数量" width="40px"></el-table-column>
                <el-table-column prop="rdPwd" label="密码" width="160px"></el-table-column>
                <el-table-column prop="rdAdminRoles" label="角色"></el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button @click="handleClickEdit()" type="text" size="small">解挂</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {cancelReportLoss, reportLoss, updateLibraryCardInfo} from "@/api";

    export default {
        data() {
            return {
                params: {
                    id:0
                },
                searchParams:{},
                ruleForm: {
                    name: '',
                    workplace: '',
                    type: '',
                    gender: '',
                    phone: '',
                    email: '',
                    status: '',
                    password: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入读者姓名', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    workplace: [
                        {required: true, message: '请选择读者所在单位', trigger: 'change'}
                    ]
                    ,
                    type: [
                        {required: true, message: '请选择读者类型', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择读者性别', trigger: 'change'}
                    ],
                    phone: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'},
                        {max: 11, min: 11, message: "长度必须是十一位", trigger: 'blur'}
                    ],
                    email: [
                        {required: false, message: '请输入邮箱（选填）', trigger: 'blur'},
                    ],
                    status: [
                        {required: true, message: '请选择读者类型', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 8, message: "长度必须大于八位", trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {

            handleClickEdit() {
                this.params.id=this.queryResult[0].rdId;
                this.cancelReportLossFn(this.params)
            },
            async cancelReportLossFn(params={}){
                let response = await cancelReportLoss(params);
                if (response.code==200){
                    this.ruleForm.status="有效"
                    alert("解除挂失挂失成功")
                    //this.$store.dispatch("REPORTLOSS")
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.searchParams.name = this.ruleForm.name
                        this.searchParams.type = this.ruleForm.type
                        this.searchParams.workplace = this.ruleForm.workplace
                        this.$store.dispatch("queryReader", this.searchParams)
                        if (this.queryResult.length == 0) {
                            this.show = true
                        }
                        if (this.queryResult.length > 0) {
                            this.show = false
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        computed: {
            ...mapState({
                queryResult: (state) => state.Reader.readerList
            })
        },
        mounted() {
            this.$store.dispatch("clearResultList")
        }

    }
</script>

<style scoped>
    .formContainer {
        width: 500px;
        margin: 0 auto;
    }

    .tableContainer {
        position: relative;
        right: 0px;
        left: 0px;
    }
</style>
